<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>

<div id="app">
<!--    在页面显示-->
<shop-cart></shop-cart>
</div>

<!--父组件-->
<template id="shop-cart">
<!--    组件只能有一个根元素-->
    <div class="wrap">
<!--父亲传递头部数据-->
        <cart-header :shopname="shopName" :desc="description" :support="support"></cart-header>
<!--        父亲传递list数组，子组件发送数据到父组件-->
        <cart-list :list="list" @dec="handlechange"  @add="handlechange" @change="handlechange"></cart-list>
        <cart-total :list="list"></cart-total>
    </div>
</template>

<!--商品头部组件-->
<template id="cart-header">
    <div class="cart-header">
        <!--头部logo-->
        <div class="brand"></div>
        <!--头部标题内容-->
        <div class="header-content">
            <div class="name">{{shopname}}</div>
            <div class="description">{{desc}}</div>
            <div class="description">{{support}}</div>
        </div>
    </div>
</template>

<!--商品列表组件-->
<template id="cart-list">
    <div class="cart-list">
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <!--商品图片-->
                <div class="list-img">
                    <img :src=item.img alt="皮蛋瘦肉粥">
                </div>
                <!--商品内容-->
                <div class="list-content">
                    <h2 class="name">{{item.name}}</h2>
                    <p class="desc">{{item.cate}}</p>
                    <p class="desc">{{item.saleNum}}</p>
                    <div class="price">
                        <span class="num">￥{{item.price}}</span>
                        <!--商品价格控制器-->
                        <div class="cart-contorl">
                            <span class="cart-dec" @click="dec(item.id)">-</span>
                            <input type="text" class="cart-count" :value=item.num @change="change(item.id,$event)">
                            <span class="cart-add" @click="add(item.id)">+</span>
                        </div>
                    </div>

                </div>
            </li>
        </ul>
    </div>
</template>

<!--总价组件-->
<template id="cart-total">
    <div class="cart-total">
        <p >总价格￥{{total}}</p>
    </div>
</template>
</body>
<script>
    // 商品头部组件名称
    let carHeader = {
        template:'#cart-header',
        props:["shopname","desc","support"],//接收数据

    }
    // 商品列表组件名称
    let cartList = {
        template:'#cart-list',
        props:['list'],
        methods:{
            //不允许直接改变父组件的元素，通过id改变，传递数据给父组件
            dec(id){
                this.$emit('dec',{
                    id,
                    type:'dec'
                })
            },
            add(id) {
                this.$emit('add',{
                    id,
                    type:'add'
                })
            },
            change(id,e) {
                if (e.target.value < 0) {
                    alert('你这样是违法的！')
                    return
                }
                this.$emit('change',{
                    id,
                    type:'change',
                    num:parseInt(e.target.value)
                    //e 事件对象
                })
            }
        }
    }
    // 商品总价组件
    let cartTotal = {
        template:'#cart-total',
        props:['list'],
        //通过计算机属性计算结果，计算机属性可以和data一样在模板语法上面使用。
        computed:{
            total(){
                let t = 0
                for (let i = 0; i < this.list.length; i++) {
                    t +=this.list[i].price * this.list[i].num
                }
                return t
            }
        }
    }
    // 父组件
    Vue.component('shop-cart',{
        template:'#shop-cart',
        components:{
            "cart-header":carHeader,
            "cart-list":cartList,
            "cart-total":cartTotal
    }, data(){
            return {
                    shopName:'粥品香坊（回龙观）',
                    description:"蜂鸟转送/38分钟送达",
                    support:'在线只复满28减5',
                    list:[
                        {
                            id:1,
                            img:'./img/01.jpg',
                            name:'皮蛋瘦肉粥',
                            cate:'咸粥',
                            saleNum:'月售229',
                            price:10,
                            num:1
                        },{
                            id:2,
                            img:"./img/02.jpg",
                            name:'扁豆焖面',
                            cate:'主食',
                            saleNum: '月售500',
                            price:15,
                            num:1
                        },{
                            id:3,
                            img:'./img/03.jpg',
                            name:'葱花饼',
                            cate:'面食',
                            saleNum: '月售134份',
                            price: 5,
                            num:1
                        }
                    ]
            }
        },
        methods:{
            //子组件放松过来的数据是一个对象。
            handlechange(value) {
                // 如果type是change，那么就算内容改变了。遍历数组确定id，让后改变值
                if (value.type == 'change') {
                    for (let i = 0; i< this.list.length;i++) {
                        if (this.list[i].id == value.id) {
                            this.list[i].num = value.num
                        }else if(this.list[i].num < 0) {
                            this.list[i].num = 0;
                        }
                    }
                //如果type是add,那么就算加一。遍历数组确定id，值加一
                }else if (value.type == 'add') {
                    for (let i = 0; i < this.list.length;i++) {
                        if (this.list[i].id == value.id) {
                            this.list[i].num += 1
                        }
                    }
                    //如果type是dec,那么就算减一。遍历数组确定id，值减一
                } else if(value.type =='dec') {
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.list[i].id == value.id) {
                            if (this.list[i].num > 0) {
                                this.list[i].num -= 1
                            }
                        }
                    }
                }
            }
        }

    })
    const vm = new Vue({
        el:"#app",

    })
</script>
</html>